<!-- 商家服务协议 -->
<template>
	<view class="template-agreement">
		<!-- 顶部标题 -->
    <CustomNavBar ref="customNavBarRef" title="隐私政策" :isSearch="false" :showIcon="false" :isBack="true" />

		<!-- 内容区域 -->
		<view class="agreement-content" :style="{marginTop: getNavBarHeight() + 'px'}">
			<view class="agreement-section">
				<view class="agreement-title">一、信息收集</view>
				<view class="agreement-text">
          我们会在用户使用本服务时，收集以下信息：
          1、用户主动提供的信息（如昵称、联系方式等）；<br>
          2、使用过程中产生的日志信息（如访问时间、使用频率）；<br>
          3、必要的设备信息（如操作系统、设备型号、网络状态）。<br>
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">二、信息使用</view>
				<view class="agreement-text">
          收集的信息将用于：<br>
          1、提供和优化服务；<br>
          2、改善用户体验；<br>
          3、用于安全防护与故障排查；<br>
          4、符合法律法规或监管要求的其他用途。<br>
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">三、 信息共享与披露</view>
				<view class="agreement-text">
          除以下情形外，我们不会与任何第三方共享用户个人信息：<br>
          1、取得用户明确授权；<br>
          2、根据法律法规或政府机关要求；<br>
          3、为维护合法权益（如防止欺诈、保护安全等）。<br>
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">四、信息存储与保护</view>
				<view class="agreement-text">
          我们会采取合理的安全措施保护用户信息，防止信息泄露、丢失或被滥用。
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">五、用户权利</view>
				<view class="agreement-text">
          用户有权：<br>
          1、查询、更正、删除自己的个人信息；<br>
          2、撤回授权；<br>
          3、注销账户。<br>
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">六、未成年人保护</view>
				<view class="agreement-text">
          若用户为未成年人，应在监护人指导下使用本服务。我们不会主动收集未成年人个人信息。<br>
				</view>
			</view>
			
			<view class="agreement-section">
				<view class="agreement-title">七、隐私政策的变更</view>
				<view class="agreement-text">
          我们可能会根据业务发展或法律要求不时更新隐私政策，更新后会在应用内公布
				</view>
			</view>
    </view>
  </view>
		
		<!-- 底部固定区域 -->
<!--		<view class="agreement-fixed-bottom">-->
<!--			&lt;!&ndash; 倒计时提示文本 &ndash;&gt;-->
<!--			<view class="countdown-tip">-->
<!--				请仔细阅读协议内容-->
<!--				<text v-if="isCountingDown"> ({{ countDown }}秒)</text>-->
<!--			</view>-->
<!--			-->
<!--			<view -->
<!--				class="agreement-button" -->
<!--				:class="{-->
<!--					'agreement-button-active': !isCountingDown-->
<!--				}" -->
<!--				@click="agreeAction"-->
<!--			>-->
<!--				同意并继续-->
<!--			</view>-->
<!--			<view class="agreement-hint">-->
<!--				<text>点击同意即表示您已阅读并接受本协议</text>-->
<!--			</view>-->
<!--		</view>-->
<!--	</view>-->
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import CustomNavBar from "@/composables/header/index.vue";
import {getNavBarHeight} from "@/utils/navBarHeight";
// 响应式数据
const isAgree = ref(false) 
const countDown = ref(5) 
const isCountingDown = ref(true) 
let timer = null

// 开始倒计时
const startCountDown = () => {
	isCountingDown.value = true
	countDown.value = 5 
	
	timer = setInterval(() => {
		countDown.value--
		
		if (countDown.value <= 0) {
			clearInterval(timer)
			isCountingDown.value = false
		}
	}, 1000)
}

// 在组件挂载后初始化
onMounted(() => {
	// 启动倒计时
	startCountDown()
})

// 组件卸载时清除定时器
onUnmounted(() => {
	if (timer) {
		clearInterval(timer)
		timer = null
	}
})

// 同意协议
const agreeAction = () => {
	// 如果正在倒计时，不执行操作
	if (isCountingDown.value) return
	
	isAgree.value = true
	
	// 返回上一页
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.template-agreement {
		background-color: #FFFFFF;
		min-height: 100vh;
		position: relative;
		padding-bottom: 200rpx;
	}

	/* 顶部标题 */
	.page-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #FFFFFF;
	}
	
	.page-title {
		font-size: 18px;
		font-weight: bold;
		color: #000;
		padding: 12px 15px;
		display: block;
	}

	.agreement-content {
		padding: 0 15px;
	}
	
	.agreement-section {
		margin-bottom: 20px;
	}
	
	.agreement-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}
	
	.agreement-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}
	
	/* 底部固定区域 */
	.agreement-fixed-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 15px;
		background-color: #FFFFFF;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
		z-index: 999;
	}
	
	/* 倒计时提示文本 */
	.countdown-tip {
		text-align: center;
		font-size: 14px;
		color: #333333;
		margin-bottom: 10px;
	}
	
	.agreement-button {
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 0;
		font-size: 16px;
		background-color: #CCCCCC;
		color: #333333;
		margin-bottom: 8px;
	}
	
	.agreement-button-active {
		background-color: #3165cc;
		color: #FFFFFF;
	}
	
	.agreement-hint {
		font-size: 12px;
		color: #999;
		text-align: center;
	}
</style>
